<template>
  <Fragment>
    <div class="head-wrap borderBottom-1px">
      <div class="title left borderBottom-2px">{{title}}</div>
      <div class="operate right"> 
        <span @click="changeTab(item.id)" v-for="(item,index) in items" :key="item.id" :class="{active : index===curId}">{{item.label}}</span>                 
      </div>
    </div>
    <div class="content-wrap">
      <div class="chart-content">
        <div v-if="curId===0" class="chart-content">
          <div class="total-number-outpatient-clinics">
            <div class="above">
              <p>门诊总人数</p>
              <h4>145784 <span>人</span> </h4>
            </div>
            <div class="bottom">
              <div class="number item">
                <p>挂号总数</p>
                <h4>15148 <span>人</span></h4>
              </div>
              <div class="number item">
                <p>医技总数</p>
                <h4>15148 <span>人</span></h4>
              </div>
              <div class="number item">
                <p>处方总数</p>
                <h4>15148 <span>人</span></h4>
              </div>
            </div>
          </div>
        </div>
        <div v-if="curId===1" class="chart-content">
          <div class="total-number-outpatient-clinics">
            <div class="above">
              <p>门诊总人数2</p>
              <h4>145784 <span>人</span> </h4>
            </div>
            <div class="bottom">
              <div class="number item">
                <p>挂号总数</p>
                <h4>15148 <span>人</span></h4>
              </div>
              <div class="number item">
                <p>医技总数</p>
                <h4>15148 <span>人</span></h4>
              </div>
              <div class="number item">
                <p>处方总数</p>
                <h4>15148 <span>人</span></h4>
              </div>
            </div>
          </div>
        </div>
      </div>                         
    </div>
    <img src="@/assets/images/card819.png" class="card819" alt="">
  </Fragment>
</template>

<script>

import { Fragment } from 'vue-fragment'
export default {
  name:'box-card-single-analysis3-menzhenzongshu',
  components:{Fragment},
  props:{
    title:{
      type:String
    },
    items:{
      type:Array
    },
  },
  data(){
    return{
      curId:0,
    }
  },
  methods:{
    changeTab(id){
      this.curId=id
    },
  }
}
</script>
<style lang="less" scoped>
.left{float: left;}
.right{float: right;}
.borderBottom-1px{
  border-bottom: .01rem solid #7787C7 ;
}
.borderBottom-2px{
  border-bottom: .02rem solid #7787C7 ;
}
.head-wrap{
    font-size: .16rem;
    color:#ffffff;
    overflow: hidden;
    .title{
      height: .26rem;
      line-height: .262rem;
    }
    .operate{
      span{
        height: .26rem;
        line-height: .26rem;
        display: inline-block;
        cursor: pointer;
        background: url('~@/assets/images/671.png') no-repeat center center;
        background-size: contain;
        padding: 1px .2rem;
      }
      span.active{
        background: url('~@/assets/images/670.png') no-repeat center center;
        background-size: contain;
        padding: 1px .2rem;
      }
    }
  }
  .content-wrap{
    width: 100%;
    // height:calc( (100vh - 1.23rem) / 3 - .36rem) ;
    .chart-content{
      width: 100%;
      height:calc( (100vh - 1.23rem) / 3 - .36rem) ;
      float: left;
      overflow: hidden;
      .above{
          background:url('~@/assets/images/1021.png');
          background-size: contain;
          background-repeat: no-repeat;
          background-size: 85%;
          width: 3.31rem;
          height: .87rem;
          margin: 0 auto;
          padding-left: .9rem;
          padding-top: 0rem;
          margin-top:.1rem;
          p{
            padding:.06rem 0;
            margin:0;
            padding-left:.03rem;
            color:#69C4E3
          }
          h4{
            padding:0;
            margin:0;
            font-size: .28rem;
            color: #ffffff;
            span{
              font-size: .14rem;
            }
          }
        }
        .abovebg{
          background:url('~@/assets/images/1022.png');
          background-size: contain;
          background-repeat: no-repeat;
          background-size: 85%;
        }
        .bottom{
          margin: 0 auto;
          margin-top:.1rem;
          margin-bottom: .1rem;
          .item{
            display: inline-block;
            background:url('~@/assets/images/700.png');
            background-size: contain;
            background-repeat: no-repeat;
            padding-left:.52rem;
            padding-top:.05rem;
            padding-bottom:.08rem;
            p{
              padding:0;
              margin:0;
              padding-left: .04rem;
              color:#69C4E3;
              padding-top:0rem;
              padding-bottom:.04rem;
            }
            h4{
              padding:0;
              margin:0;
              font-size: .24rem;
              color: #ffffff;
              span{
                font-size: .14rem;
              }
            }
          }
        }
    }
  }
  img{width: 100%;float: left;}
</style>